<template>
  <div class="wrapper">
    <!--头部-->
    <header>
      <p>用户注册</p>
    </header>
    <!--表单部分-->
    <ul class="form-box">
      <li>
        <div class="title">
          手机号码:
        </div>
        <div class="content">
          <input type="text" v-model="user.userId" placeholder="手机号码">
        </div>
      </li>
      <li>
        <div class="title">
          密码:
        </div>
        <div class="content">
          <input type="password" v-model="user.password" placeholder="密码">
        </div>
      </li>
      <li>
        <div class="title">
          确认密码:
        </div>
        <div class="content">
          <input type="password" v-model="confirmPassword" placeholder="确认密码">
        </div>
      </li>
      <li>
        <div class="title">
          用户名称:
        </div>
        <div class="content">
          <input type="text" v-model="user.userName" placeholder="用户名称">
        </div>
      </li>
      <li>
        <div class="title">
          性别:
        </div>
        <div class="content" style="font-size: 3vw;">
          <input type="radio" v-model="user.userSex" value="1" style="width: 6vw;height:3.2vw;">男
          <input type="radio" v-model="user.userSex" value="0" style="width: 6vw;height:3.2vw;">女
        </div>
      </li>
    </ul>

    <div class="button-login">
      <button @click="register">注册</button>
    </div>
    <!--底部菜单-->
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/Footer";

export default {
  name: "Register",
  data() {
    return {
      user: {
        userId: '',
        password: '',
        userName: '',
        userSex: 1,
        delTag: 1
      },
      confirmPassword: ''
    }
  },
  methods: {
    //检测userId是否存在
    // checkUserId() {
    //   let url = 'UserController/getUserById/${this.user.userId}';
    //   this.$axios.get(url).then(response => {
    //     if (response.data.result == 1) {
    //       this.user.userId = '';
    //       alert('此手机号码已存在!')
    //     }
    //   }).catch(error => {
    //     console.error(error);
    //   });
    // },
    register() {
      //一系列输入信息检测
      if (this.user.userId == '') {
        alert('手机号码不能为空！');
        return;
      }
      if (!this.checkPhoneNumber(this.user.userId)) {
        alert('手机号码格式错误');
        return;
      }
      if (this.user.password == '') {
        alert('密码不能为空！');
        return;
      }
      if (this.confirmPassword != this.user.password) {
        alert('两次输入的密码不一致！');
        return;
      }
      if (this.user.userName == '') {
        alert('用户名不能为空！');
        return;
      }
      //注册请求
      let url = 'user/register';
      this.$axios.post(url, JSON.stringify({
        userId: this.user.userId,
        password: this.user.password,
        userName: this.user.userName,
        userSex: this.user.userSex
      }), {
        headers: {'Content-Type': 'application/json;charset=utf-8'} //设置请求头
      }).then(response => {
        if (response.data.code != 400) {
          alert('注册成功！');
          //回到前一个页面
          this.$router.go(-1);
        } else {
          alert('注册失败！' + response.data.message);
        }
      }).catch(error => {
        console.error(error);
      });
    },
    //手机号合法性检测
    checkPhoneNumber(phonenumber) {
      var re = /^1\d{10}$/;
      let str = phonenumber;
      if (re.test(str)) {
        return true
      } else {
        return false
      }
    }
  },
  components: {Footer}
}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper {
  width: 100%;
  height: 100%;
}

/**************************header**************************/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #FFF;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/**************************表单**************************/
.wrapper .form-box {
  width: 100%;
  margin-top: 12vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;

  display: flex;
  align-items: center;
}

.wrapper .form-box .title {
  flex: 0 0 18vw;
  font-size: 3vw;
  font-weight: 700;
  color: #666;
}

.wrapper .form-box .content {
  flex: 1;
}

.wrapper .form-box .content input {
  border: none;
  outline: none;
  width: 100%;
  height: 4vw;
  font-size: 3vw;
}

.wrapper .button-login {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}

.wrapper .button-login button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #fff;
  background-color: #38CA73;
  border-radius: 4px;

  border: none;
  outline: none;
}

.wrapper .button-register {
  width: 100%;
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
}

.wrapper .button-register button {
  width: 100%;
  height: 10vw;
  font-size: 3.8vw;
  font-weight: 700;
  color: #666;
  background-color: #EEE;
  border-radius: 4px;

  border: none;
  outline: none;
  border: solid 1px #ddd;
}
</style>